<template>
    <div class="furnace-view">
        <a-card title="变卡" :bordered="false">
            <a-row :gutter="16">
                <a-col :span="12">
                    <h3>消耗卡</h3>
                    <a-select v-model:value="sourceCard" placeholder="选择消耗卡"
                              style="width: 100%; margin-bottom: 16px">
                        <a-select-option v-for="(cardId, index) in allCards" :key="index" :value="cardId">
                            {{ cardConfig.cards[cardId].name }} {{
                                cardConfig.cards[cardId] ? `(${cardConfig.cards[cardId].value})` : '(未知)'
                            }}
                        </a-select-option>
                    </a-select>
                    <div class="card-preview">
                        <a-card v-if="sourceCard" class="card-container" hoverable>
                            <img :src="cardConfig.cards[sourceCard]?.image || 'https://via.placeholder.com/120x150'"
                                 alt="卡片图片" class="card-image"/>
                            <div class="card-info">
                                <p class="card-title">{{ sourceCard }}</p>
                                <p class="card-value">{{ cardConfig.cards[sourceCard]?.value || '未知' }}</p>
                            </div>
                        </a-card>
                        <div v-else class="default-background">选择消耗卡</div>
                    </div>
                </a-col>
                <a-col :span="12">
                    <h3>目标卡</h3>
                    <a-select v-model:value="targetCard" placeholder="选择目标卡"
                              style="width: 100%; margin-bottom: 16px">
                        <a-select-option v-for="card in transformableCards" :key="card.id" :value="card.id">
                            {{ card.name }} ({{ card.value }})
                        </a-select-option>
                    </a-select>
                    <div class="card-preview">
                        <a-card v-if="targetCard" class="card-container" hoverable>
                            <img :src="cardConfig.cards[targetCard]?.image || 'https://via.placeholder.com/120x150'"
                                 alt="卡片图片" class="card-image"/>
                            <div class="card-info">
                                <p class="card-title">{{ targetCard }}</p>
                                <p class="card-value">{{ cardConfig.cards[targetCard]?.value || '未知' }}</p>
                            </div>
                        </a-card>
                        <div v-else class="default-background">选择目标卡</div>
                    </div>
                </a-col>
            </a-row>
            <a-button type="primary" @click="transform" :disabled="!sourceCard || !targetCard" style="margin-top: 16px">
                变卡
            </a-button>
        </a-card>
    </div>
</template>

<script setup>
import {computed, ref} from 'vue'
import {useGameStore} from '../stores/game'
import cardConfig from '../config/cards.json'
import {message} from 'ant-design-vue'

const gameStore = useGameStore()
const sourceCard = ref('')
const targetCard = ref('')

const allCards = computed(() => gameStore.playerData.cards)

const transformableCards = computed(() =>
    Object.entries(cardConfig.cards)
        .filter(([_, card]) => card.canTransform)
        .map(([id, card]) => ({id, ...card}))
)

const transform = () => {
    if (!sourceCard.value || !targetCard.value) return
    const sourceValue = cardConfig.cards[sourceCard.value]?.value
    const targetValue = cardConfig.cards[targetCard.value]?.value
    if (!sourceValue || !targetValue) {
        message.error('卡片信息无效')
        return
    }
    if (sourceValue < targetValue) {
        message.error('消耗卡面额必须大于等于目标卡')
        return
    }
    gameStore.transformCard(sourceCard.value, targetCard.value)
    message.success('变卡成功')
    sourceCard.value = ''
    targetCard.value = ''
}
</script>

<style scoped>
.furnace-view {
    padding: 0;
}

.card-container {
    width: 120px;
    height: 150px;
    padding: 8px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.2s;
}

.card-container:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.card-image {
    width: 100%;
    height: 80px;
    object-fit: cover;
    border-radius: 4px;
}

.card-info {
    text-align: center;
    margin-top: 4px;
}

.card-title {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-value {
    font-size: 10px;
    color: #888;
    margin: 0;
}

.card-preview {
    text-align: center;
    min-height: 200px;
}

.default-background {
    width: 120px;
    height: 150px;
    margin: 0 auto;
    background-color: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    border-radius: 8px;
}
</style>